<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="UTF-8">
    <title>Jequery by singod</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
    <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
    <link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">
    <script type="text/javascript" src="js/je.js"></script>
    <style>
		.odiv{
			width: 100px;
			border:1px #ccc solid;
			overflow:hidden;
		}
	  </style>
  </head>
  <body>
    <section class="page-header">
      <h1 class="project-name">Jequery</h1>
      <h2 class="project-tagline">je基于原生js封装的一些快捷选择器，同时是一个轻量、小巧的js框架，精简易懂的API设计，支持链式调用，有点jQuery的味道。核心部分为选择器(selector)、dom操作、event机制。</h2>
      <a href="https://github.com/singod/jeQuery" class="btn">View on GitHub</a>
      <a href="https://codeload.github.com/singod/jeQuery/zip/gh-pages" class="btn">Download .zip</a>
    </section>

    <section class="main-content">
	<div class="odiv" id="odiv">
         <div class="odiv1">odiv2123456</div>
         <div class="odiv2">
              <p class="pdiv">点击我01</p>
              <p class="pdiv">点击我02</p>
              <p class="pdiv">点击我03</p>
         </div>
         <div class="odiv3">
              <p class="pdiv">我是01号</p>
              <p class="pdiv">我是02号</p>
              <p class="pdiv">我是03号</p>
        </div>
    </div>
    <div id="lens"></div>
    <div id="num"></div>
    <div id="gettext"></div>
    </section>

<script>

	var len = Je("#odiv p").size();

	Je("#lens").append("#odiv p的长度: "+len+'<br/>')
        Je.each([1,2,3,4,5,6,7,8],function(i,val){
		Je("#num").append("循环值："+val+'<br/>')
	})
	Je("#odiv .odiv2 p").on("click",function(){
		alert(Je(this).text())
	})
	Je("#odiv .odiv2").find("p").css({'border':'1px red solid'})
	Je("#odiv .odiv3 p").each(function(i, val){
		Je("#gettext").append("获取"+i+": "+Je(this).text()+'<br/>')
	})
	Je("#odiv").width("200px")
</script>	  
  </body>
</html>
